import React, {Component} from "react";
import Header from "./common/header";
import {actions} from "./common/window/store";
import {connect} from "react-redux";
import {BrowserRouter, Switch} from "react-router-dom";
import Footer from "./common/footer";
import RouterFilter from "./config/RouterFilter";
import {RouterConfig} from './config/RouterConfig';
import {actions as userActions} from './store/common/user'
import {queryState} from "./util/global";
import {getCurrentRouterConf} from "./util/routerUtil";
import FixSideBar from "./common/FixSideBar";
import {actions as pageActions} from "@/store/common/category/pageCategory";
import {actions as statusActions} from "@/store/common/category/statusInfo";
import 'moment/locale/zh-cn';
import {isMobile} from 'react-device-detect';

const rdom = require('react-dom');

class App extends Component {
    constructor(props) {
        super(props);
        this.handleMouseWheel = this.handleMouseWheel.bind(this);
    }

    componentDidMount() {
        this.props.resizeWindowState();
        window.addEventListener('scroll', this.handleMouseWheel);
        window.addEventListener('wheel', this.handleMouseWheel)
        window.addEventListener('resize', this.props.resizeWindowState);

        /* 开启全局WebSocket */
        // WebSocketUtil.connect()

        /* 初始化字典 */
        this.props.init();
    }

    /* 销毁 */
    componentWillUnmount() {
        /* 结束推送 */
        // WebSocketUtil.close();
        this.props.clearData();
        window.removeEventListener('resize', this.props.resizeWindowState);
        window.removeEventListener('wheel', this.handleMouseWheel);
        window.removeEventListener('scroll', this.handleMouseWheel);
    }


    handleMouseWheel(event) {
        let scrollDistance = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollDistance >= 410) {    // 触发的位置
            this.props.handleHeaderShouldFixed(false);
        } else {
            this.props.handleHeaderShouldFixed(true);
        }

        if (event.type.toLowerCase() === 'wheel') {
            if (event.deltaY !== 0) {
                this.props.handleHeaderScroll(event.deltaY < 0)
            }
        }

    }

    render() {
        const {loading, width, height} = this.props
        return (
            <div style={{
                width: queryState('window.width'),
                height: queryState('window.height')
            }}
            >
                {/* 全局loading */}
                <BrowserRouter>
                    {/* 侧栏（ 绝对定位脱离文档流 ） */}
                    <FixSideBar width={width} height={height}/>
                    {/* 页面顶栏（ 绝对定位脱离文档流 ） */}
                    <Header key={'header'}/>
                    {/* 全局导航 */}
                    {getCurrentRouterConf(this.props.RT, RouterConfig)}
                    <Switch>
                        {/* 路由守卫 */}
                        <RouterFilter routerConfig={RouterConfig}/>
                    </Switch>
                    <Footer/>
                </BrowserRouter>
                {/*<Spin tip='正在努力加载中...'*/}
                {/*      // spinning={!!loading}*/}
                {/*      spinning={true}*/}
                {/*      delay={100}*/}
                {/*      style={{width:this.props.width,height:this.props.height,position:'fixed',top:0,left:0}}*/}
                {/*/>*/}
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        /*引入redux-immutable后写法*/
        loading: state.getIn(['window', 'loading']),
        width: state.getIn(['window', 'width']),
        height: state.getIn(['window', 'height']),
        RT: state.getIn(['window', 'router']),
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        resizeWindowState() {
            if (isMobile) {
                dispatch(actions.systemWindowSize({
                        width: window.screen.width + 'px',
                        height: window.screen.height + 'px'
                    }
                ));
            } else {
                dispatch(actions.systemWindowSize({
                        width: window.innerWidth + 'px',
                        height: window.innerHeight + 'px'
                    }
                ));
            }
        },
        clearData() {
            sessionStorage.clear();
            dispatch(userActions.clearBoth);
        },
        init() {
            /* 初始化文章类型列表 */
            dispatch(pageActions.Refresh());
            /* 初始化状态类型列表 */
            dispatch(statusActions.Refresh());
        },
        handleHeaderShouldFixed(bool) {
            dispatch(actions.systemWindowHeadFixed(bool));
        },
        handleHeaderScroll(bool) {
            dispatch(actions.systemWindowScroll(bool));
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);
